<template>
  <div class="selectTree">
    <el-select
      filterable
      :filter-method="filterMethod"
      class="bin_select"
      ref="selectTree"
      multiple
      v-model="transitValue"
      @remove-tag="removeTag"
      clearable
      @clear="clearInput"
      @focus="blurInput"
    >
      <el-option
        v-for="item in selectOptions"
        :key="item.sid"
        :label="item.name"
        :value="item.sid"
        style="display: none"
      />
      <el-tree
        class="main-select-el-tree bin_tree"
        ref="selecteltree"
        :filter-node-method="filterNode"
        show-checkbox
        @check-change="handleCheckChange"
        :highlight-current="true"
        :data="dataArray"
        :props="defaultProps"
        :expand-on-click-node="false"
        node-key="sid"
        @node-click="handleNodeClick"
        :current-node-key="currentKey"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
        </span>
      </el-tree>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "selectMulti",
  props: {
    dataArray: {
      type: Array,
      // default() {
      //   return [
      //     {
      //       sid: 1,
      //       name: "技术部",
      //       children: [
      //         {
      //           sid: 2,
      //           name: "QA",
      //           children: [
      //             {
      //               sid: 6,
      //               name: "123",
      //             },
      //           ],
      //         },
      //         {
      //           sid: 4,
      //           name: "wc1",
      //         },
      //       ],
      //     },
      //   ];
      // },
    },
  },
  data() {
    return {
      transitValue: [],
      selectOptions: [],
      currentKey: null,
      defaultProps: {
        label: "name",
        children: "children",
      },
    };
  },
  computed: {
    formatData() {
      let result = [];
      function getChild(item) {
        item.forEach((i, x) => {
          if (Array.isArray(i["children"])) {
            result.push(i);
            getChild(i["children"]);
          } else {
            result.push(i);
          }
        });
      }
      getChild(this.dataArray);
      return result;
    },
  },
  methods: {
    handleNodeClick(a, b, c) {},
    filterMethod(value) {
      this.$refs["selecteltree"].filter(value.trim());
    },
    blurInput() {
      this.$refs["selecteltree"].filter("");
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    clearInput() {
      this.$refs["selecteltree"].setCheckedKeys([]);
    },
    removeTag(e) {
      this.$refs["selecteltree"].setChecked(e, false);
    },
    handleCheckChange() {
      let check = this.$refs["selecteltree"].getCheckedNodes();
      console.log(check);
      let arr = check.filter((i) => !i.children);
      this.transitValue = arr.map((i) => {
        return i.sid;
      });
      this.$emit("treeChange", arr);
    },
  },
  watch: {
    formatData: {
      immediate: true,
      handler: function (n) {
        if (n.length > 0) {
          this.selectOptions = n;
        } else {
          this.selectOptions = [];
        }
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.main-select-el-tree {
  max-height: 300px;
  overflow-y: auto;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item {
  display: none;
}
</style>
